import React from 'react';

import styles from '../index.less';

const ProTitle = ({ children }) => <div className="layout-page-main-card-title">{children}</div>;

export default function LayoutPage({ children, header, footer }) {
  const isBrowserType = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
  return (
    <div className={styles['layout-page']}>
      <div className="layout-page-header">{header}</div>
      <div className="layout-page-main" style={{ padding: isBrowserType ? '10px 0' : '33px 50px' }}>
        {children}
      </div>
      <div className="layout-page-footer">{footer}</div>
    </div>
  );
}

export { ProTitle };
